import React from 'react';
import { useStudents } from '../students/StudentContext';
import Charts from '../../components/Charts/Charts';
import styles from './StatisticsPage.module.css';

const StatisticsPage: React.FC = () => {
  const { students } = useStudents();
  
  // 计算统计信息
  const totalStudents = students.length;
  const maleStudents = students.filter(s => s.gender === '男').length;
  const femaleStudents = students.filter(s => s.gender === '女').length;
  
  // 计算不同年级的数量
  const grades: Record<string, number> = {};
  students.forEach(student => {
    const grade = student.grade || '未分配';
    grades[grade] = (grades[grade] || 0) + 1;
  });
  const gradeCount = Object.keys(grades).length;

  return (
    <div className={styles.statisticsPage}>
      <h2 className={styles.pageTitle}>信息统计</h2>
      
      <div className={styles.statisticsContainer}>
        <div className={styles.statisticsGrid}>
          <div className={styles.statisticCard}>
            <div className={styles.statisticLabel}>总学生数</div>
            <div className={styles.statisticValue}>{totalStudents}</div>
          </div>
          <div className={styles.statisticCard}>
            <div className={styles.statisticLabel}>男生人数</div>
            <div className={styles.statisticValue}>{maleStudents}</div>
          </div>
          <div className={styles.statisticCard}>
            <div className={styles.statisticLabel}>女生人数</div>
            <div className={styles.statisticValue}>{femaleStudents}</div>
          </div>
          <div className={styles.statisticCard}>
            <div className={styles.statisticLabel}>年级数量</div>
            <div className={styles.statisticValue}>{gradeCount}</div>
          </div>
        </div>
      </div>
      
      <Charts students={students} />
    </div>
  );
};

export default StatisticsPage;